<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- <script src="../js/ajax.js"></script> -->
    <script src="../js/api.js"></script>
    <style>
        .rt {
            color: green;
            font-size: 12px;
        }

        .err {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <form onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input id="user" type="text">
            <span id="user_tips"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input id="pwd" type="text">
            <span id="pwd_tips"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input id="phone" type="text">
            <span id="phone_tips"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input id="email" type="text">
            <span id="email_tips"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input id="code" type="text">
            <span id="codeSpan">1111</span>
            <span id="code_tips"></span>
        </p>
        <p><input id="btn" type="submit" disabled value="注册"></p>
    </form>
</body>
<script>
    // 获取元素 点击时验证 结果=>span(提示消息)

    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      中
    // 数字,大写,小写,特殊字符  中 出现3种      强
    // 数字,大写,小写,特殊字符  中 出现4种      超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )  
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 

    var userInp = document.getElementById("user");
    var userTips = document.getElementById("user_tips");

    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwd_tips");


    var phoneInp = document.getElementById("phone");
    var phoneTips = document.getElementById("phone_tips");

    var emailInp = document.getElementById("email");
    var emailTips = document.getElementById("email_tips");

    var codeInp = document.getElementById("code");
    var codeTips = document.getElementById("code_tips");

    var codeSpan = document.getElementById("codeSpan");
    var btn = document.getElementById("btn");

    codeSpan.innerText = randCode();
    codeSpan.onclick = function () {
        codeSpan.innerText = randCode();
    }

    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;
    var codeFlag = false;

    userInp.onchange = function () {
        var user = userInp.value.trim();
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        userFlag = false;
        if (reg.test(user)) {  //格式正确  


            // var p = isExistUser(user);   // 默认返回 pending状态的Promise实例
            // p.then(function (result) {
            //     if (result.status) {
            //         userTips.textContent = "√";
            //         userTips.className = "rt";
            //         userFlag = true;
            //         isEnabled();

            //     } else {
            //         userTips.textContent = "用户名已被注册";
            //         userTips.className = "err";
            //     }
            // }).catch(err => {
            //     throw err;
            // })


            //  isExistUser(user);   默认返回 pending状态的Promise实例
            isExistUser({ user }).then(function (result) {
                if (result.status) {
                    userTips.textContent = "√";
                    userTips.className = "rt";
                    userFlag = true;
                    isEnabled();

                } else {
                    userTips.textContent = "用户名已被注册";
                    userTips.className = "err";
                }
            }).catch(err => {
                throw err;
            })

        } else {
            userTips.textContent = "由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
            userTips.className = "err";
        }

    }

    pwdInp.onchange = function () {
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;
        pwdFlag = false;
        if (reg.test(pwd)) {

            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            if (/[0-9]/.test(pwd)) numFlag = true;
            if (/[a-z]/.test(pwd)) smallFlag = true;
            if (/[A-Z]/.test(pwd)) bigFlag = true;
            if (/[_$]/.test(pwd)) speFlag = true;
            var sum = numFlag + smallFlag + bigFlag + speFlag;

            pwdTips.textContent = "密码强度:" + sum;
            pwdTips.className = "rt";
            pwdFlag = true;

        } else {
            pwdTips.textContent = "由数字,大小写字母,下划线,$组成,6-12位";
            pwdTips.className = "err";
        }
        isEnabled()
    }

    phoneInp.onchange = function () {
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;
        phoneFlag = false;
        if (reg.test(phone)) {
            phoneTips.textContent = "√";
            phoneTips.className = "rt";
            phoneFlag = true;
        } else {
            phoneTips.textContent = "请输入正确的手机号";
            phoneTips.className = "err";
        }
        isEnabled()
    }

    // aads123123@qq.com   
    emailInp.onchange = function () {
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.com$/;
        emailFlag = false;
        if (reg.test(email)) {
            emailTips.textContent = "√";
            emailTips.className = "rt";
            emailFlag = true;
        } else {
            emailTips.textContent = "请输入正确的邮箱";
            emailTips.className = "err";
        }
        isEnabled()
    }

    codeInp.onchange = function () {
        var code = codeInp.value.trim();
        var reg = new RegExp(`^${codeSpan.textContent}$`, "i");
        codeFlag = false;
        if (reg.test(code)) {
            codeTips.textContent = "√";
            codeTips.className = "rt";
            codeFlag = true;
        } else {
            codeTips.textContent = "×";
            codeTips.className = "err";
        }
        isEnabled()
    }



    // btn.onclick = null;
    function registerHandler() {
        // alert("注册成功");
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // 注册 -> 将注册的数据存储起来 前端 => 后端 => 数据库
        // var xhr = new XMLHttpRequest();

        // xhr.open("post", "../php/register.php", true);

        // // data(数据) date(日期)
        // // form(表单) from(从...来)
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         var result = JSON.parse(xhr.responseText);
        //         console.log(result);

        //         if (result.status) {
        //             location.href = "./login.html";
        //         } else {
        //             alert(result.msg);
        //         }
        //     }
        // }

        // ajax({
        //     type: "post",
        //     url: "../php/register.php",
        //     // data: "user=" + user,
        //     data: {
        //         user,
        //         pwd,
        //         phone,
        //         email,
        //     },
        //     dataType: "json",
        //     success: function (result) {
        //         console.log(result);
        //         if (result.status) {
        //             location.href = "./login.html";
        //         } else {
        //             alert(result.detail);
        //         }
        //     }
        // })

        register({ user, pwd, phone, email }).then(result => {
            if (result.status) {
                location.href = "./login.html";
            } else {
                alert(result.detail);
            }
        }).catch(err => {
            throw err;
        })


    }

    function isEnabled() {
        if (userFlag && pwdFlag && phoneFlag && emailFlag && codeFlag) {
            btn.disabled = false;
            btn.onclick = registerHandler;
        } else {
            btn.onclick = null;
            btn.disabled = true;
        }
    }



</script>

</html>